<template>
  <el-dialog
    v-model="state.show"
    title="引用模版"
    width="480px"
    modal-class="docFee-Add-dailog"
  >
    <el-form
      ref="addFormRef"
      :model="state.addForm"
      label-suffix=":"
      label-width="90px"
      :rules="state.rules"
      :show-message="false"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="选择费用模板" class="table-form-header">
            <AppPageTable
              stripe
              :data="state.tableData.data"
              :height="200"
              :option="state.tableData.option"
              :isPagination="true"
            >
              <el-table-column
                label="选项"
                width="50"
                align="center"
                fixed="left"
              >
                <template #default="{ row }">
                  <div class="sft-radio">
                    <el-radio v-model="state.selectedId" :label="row.id"
                      >&nbsp;</el-radio
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="feeMouldName"
                label="模版名称"
                show-overflow-tooltip
              />
            </AppPageTable>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div>
        <el-button type="default" @click="state.show = false">取消</el-button>
        <el-button type="primary" @click="modifySubmit">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineComponent, nextTick, reactive, ref } from 'vue'
import AppSearchForm from '@/components/AppSearchForm.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
import request from '@/public/request'
import vueBus from '@/utils/vueBus'

//判断当前打开的是否是业务列表
const props = defineProps({})

const emits = defineEmits(['saveFeeModule'])

const Router = useRouter()
const Route = useRoute()
const store = useStore()

const state = reactive({
  show: false,
  selectedId: 0,
  addForm: {},
  customer: [],
  customerLoading: false,
  tableData: {
    data: [],
    option: useTableOption({
      pageSize: 15,
      pageSizes: [10, 15, 50, 100]
    })
  },
  showCheck: false
})
const addFormRef = ref('')

// 保存
async function modifySubmit() {
  if (!state.selectedId) {
    ElMessage.warning('请选择一个费用模版')
    return
  }
  let res = await request.get('/api/fefeemould/querybyfeemouldid', {
    id: state.selectedId
  })
  if (res.status) {
    emits('saveFeeModule', res.data[0])
    state.show = false
  } else {
    ElMessage.warning(res.message)
  }
}

// row：只有编辑时才会带入对应的数据
async function open(row) {
  let res = await request.get('/api/fefeemouldname/query', { KeyWords: '' })
  console.log(res, 'res')
  state.selectedId = 0
  state.tableData.data = res.content
  state.show = true
}
defineExpose({
  open
})
</script>

<style lang="scss">
.docFee-Add-dailog {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 7px 16px 7px 16px;
  }

  .el-dialog {
    padding: 0px;
  }

  .el-dialog__body {
    padding-right: 36px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
@import '@/styles/business/business.scss';
:deep(.el-table--small .cell) {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
}

:deep(.el-radio) {
  margin-right: 0;
}

:deep(.el-radio__label) {
  padding-left: 0px;
}

.table-form-header::before {
  content: '*';
  color: #ff0000;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
  margin-top: 3px;
}
</style>
